<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>发布公告</title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <style type="text/css">
        .layui-table-cell {
            height: 100%;
            max-width: 100%;
        }
    </style>
</head>
<body>

<form class="layui-form">

    <button type="button" class="layui-btn" id="addNoticeBtn">
        <i class="layui-icon">&#xe608;</i> 发布新公告
    </button>

</form>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
    <legend>NY·房屋租赁社区-公告时间线</legend>
</fieldset>
<ul class="layui-timeline" id="notice">



</ul>


<!-- 添加页面开始 -->
<form class="layui-form" id="addNoticeForm" lay-filter="addNoticeForm" style="display: none;padding: 20px 55px 0px 0px">
    <div class="layui-form-item">
        <label class="layui-form-label">公告标题</label>
        <div class="layui-input-block">
            <input type="text" name="title" placeholder="请输入公告标题" lay-verify="required" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">公告内容</label>
        <div class="layui-input-block">
            <input type="text" name="content1" lay-verify="required" placeholder="请输入公告内容" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">公告内容</label>
        <div class="layui-input-block">
            <input type="text" name="content2" lay-verify="required" placeholder="请输入公告内容" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">公告图片</label>
        <div class="layui-input-block">
            <button type="button" class="layui-btn" id="amendUpload">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
            <input type="hidden" name="url" value="" id="amendUrl">
            <img src='' height='50px' id="amendRoom"/>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit  lay-filter="addNoticeSubmit">立即发布</button>
            <button type="button" id="closeNoticeAdd" class="layui-btn layui-btn-primary">关闭</button>
        </div>
    </div>
</form>
<!-- 添加页面结束 -->



<script type="text/javascript" src="layui/layui.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">



    layui.use(['form','layer','upload'],function () {

        var form = layui.form;
        var layer = layui.layer;
        var upload = layui.upload;

        noticeList();

        function noticeList () {
            $("#notice").html("");
            /**
             * 公告列表
             **/
            $.ajax({
                url:'house-notice/list',
                type:'get',
                dataType:'json',
                success:function (result) {
                    if (result.code == 200) {
                        $.each(result.data, function (index, item) {
                            $("#notice").append("<li class=\"layui-timeline-item\">\n" +
                                "    <i class=\"layui-icon layui-timeline-axis\">&#xe63f;</i>\n" +
                                "    <div class=\"layui-timeline-content layui-text\">\n" +
                                "      <h3 class=\"layui-timeline-title\">"+item.time+"</h3>\n" +
                                "      <p>"+item.title+"</p>\n" +
                                "<ul>\n" +
                                "        <li>"+ item.content1 +"</li>\n" +
                                "        <li>"+ item.content2 +"</li>\n" +
                                "        <img src='"+ item.url +"' height='50px'>" +
                                "      </ul>" +
                                "    </div>\n" +
                                "  </li>");
                        })
                        $("#notice").append("<li class=\"layui-timeline-item\">\n" +
                            "    <i class=\"layui-icon layui-anim layui-anim-rotate layui-anim-loop layui-timeline-axis\"></i>\n" +
                            "    <div class=\"layui-timeline-content layui-text\">\n" +
                            "      <div class=\"layui-timeline-title\">NY·房屋租赁社区在新的一年上线啦！</div>\n" +
                            "    </div>\n" +
                            "  </li>");
                    }
                }
            });

        }


        /**
         * 渲染页面的图片上传
         * */
        upload.render({
            elem:'#amendUpload'
            ,url:'house-notice/upload'
            ,done: function(result){
                if(result.code==200){
                    $("#amendRoom").prop("src",result.data);
                    $("#amendUrl").val(result.data);
                }
            }
        });

        /**
         * 点击添加按钮弹出层展示添加页面
         * */
        $("#addNoticeBtn").click(function () {
            layer.open({
                type:1,
                area:['760px','60%'],
                title:['发布新公告','font-size:18px;color:orange;'],
                content:$("#addNoticeForm"),
            });
        });
        /**
         * 监听添加用户页面的 发布新公告 按钮
         * */
        form.on("submit(addNoticeSubmit)",function (obj) {
            layer.confirm("你确定要发布新公告吗？",{icon:'3',title:'提示'},function () {
                $.ajax({
                    url:'house-notice/insert',
                    data:obj.field,
                    type:"post",
                    dataType:"json",
                    success:function (data) {
                        if(data.code==200){
                            obj.form.reset();
                            layer.closeAll();
                            layer.msg("发布新公告成功！",{icon:'1',title:'提示',closeBtn :'1'});
                            noticeList();
                        }
                    }
                });
            });
            return false;
        });


        /**
         * 各个页面的一些关闭按钮
         * */
        $("#closeNoticeAdd").click(function () {
            layer.closeAll();
        });



    });
</script>


</body>
</html>